<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后端状态检查</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .test-section {
            background: white;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .success { color: #28a745; }
        .error { color: #dc3545; }
        .info { color: #17a2b8; }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover { background: #0056b3; }
        pre {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto;
        }
        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }
        .status-online { background-color: #28a745; }
        .status-offline { background-color: #dc3545; }
    </style>
</head>
<body>
    <h1>🔧 后端服务状态检查</h1>
    
    <div class="test-section">
        <h2>1. 后端服务状态</h2>
        <button onclick="checkBackendStatus()">检查后端状态</button>
        <div id="backendStatus">
            <span class="status-indicator status-offline"></span>
            <span>后端服务状态未知</span>
        </div>
    </div>

    <div class="test-section">
        <h2>2. 数据库连接测试</h2>
        <button onclick="testDatabaseConnection()">测试数据库连接</button>
        <div id="dbStatus"></div>
        <div id="dbResult"></div>
    </div>

    <div class="test-section">
        <h2>3. 用户登录测试</h2>
        <div>
            <label>用户名: <input type="text" id="username" value="admin" placeholder="输入用户名"></label><br><br>
            <label>密码: <input type="password" id="password" value="123456" placeholder="输入密码"></label><br><br>
            <button onclick="testLogin()">测试登录</button>
        </div>
        <div id="loginStatus"></div>
        <div id="loginResult"></div>
    </div>

    <div class="test-section">
        <h2>4. 购物车功能测试</h2>
        <button onclick="testCartFunction()">测试购物车功能</button>
        <div id="cartStatus"></div>
        <div id="cartResult"></div>
    </div>

    <script>
        const API_BASE_URL = 'http://localhost:8080';
        
        async function checkBackendStatus() {
            const statusDiv = document.getElementById('backendStatus');
            statusDiv.innerHTML = '<span class="status-indicator"></span><span>正在检查后端状态...</span>';
            
            try {
                // 尝试访问后端根路径
                const response = await fetch(`${API_BASE_URL}/`, {
                    method: 'GET',
                    mode: 'cors'
                });
                
                if (response.ok) {
                    statusDiv.innerHTML = '<span class="status-indicator status-online"></span><span class="success">✅ 后端服务在线</span>';
                } else {
                    statusDiv.innerHTML = '<span class="status-indicator status-offline"></span><span class="error">❌ 后端服务响应异常</span>';
                }
            } catch (error) {
                statusDiv.innerHTML = '<span class="status-indicator status-offline"></span><span class="error">❌ 后端服务离线: ' + error.message + '</span>';
            }
        }
        
        async function testDatabaseConnection() {
            const statusDiv = document.getElementById('dbStatus');
            const resultDiv = document.getElementById('dbResult');
            
            statusDiv.innerHTML = '<div class="info">正在测试数据库连接...</div>';
            resultDiv.textContent = '';
            
            try {
                // 尝试获取用户列表来测试数据库连接
                const response = await fetch(`${API_BASE_URL}/user/get-username?username=admin`);
                const data = await response.json();
                
                if (data) {
                    statusDiv.innerHTML = '<div class="success">✅ 数据库连接正常</div>';
                    resultDiv.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
                } else {
                    statusDiv.innerHTML = '<div class="error">❌ 数据库连接异常</div>';
                }
            } catch (error) {
                statusDiv.innerHTML = '<div class="error">❌ 数据库连接失败: ' + error.message + '</div>';
                resultDiv.textContent = error.message;
            }
        }
        
        async function testLogin() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const statusDiv = document.getElementById('loginStatus');
            const resultDiv = document.getElementById('loginResult');
            
            statusDiv.innerHTML = '<div class="info">正在测试登录...</div>';
            resultDiv.textContent = '';
            
            try {
                const response = await fetch(`${API_BASE_URL}/user/login`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`
                });
                
                const data = await response.json();
                
                if (data.code === '1') {
                    statusDiv.innerHTML = '<div class="success">✅ 登录成功</div>';
                    resultDiv.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
                } else {
                    statusDiv.innerHTML = `<div class="error">❌ 登录失败: ${data.message}</div>`;
                    resultDiv.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
                }
            } catch (error) {
                statusDiv.innerHTML = `<div class="error">❌ 登录请求失败: ${error.message}</div>`;
                resultDiv.textContent = error.message;
            }
        }
        
        async function testCartFunction() {
            const statusDiv = document.getElementById('cartStatus');
            const resultDiv = document.getElementById('cartResult');
            
            statusDiv.innerHTML = '<div class="info">正在测试购物车功能...</div>';
            resultDiv.textContent = '';
            
            try {
                // 测试添加商品到购物车
                const cartData = {
                    userId: 1002, // 使用测试用户ID
                    factoryId: 1, // 使用测试工厂ID
                    quantity: 1
                };
                
                const response = await fetch(`${API_BASE_URL}/cart/add`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(cartData)
                });
                
                const data = await response.json();
                
                if (data.code === '1') {
                    statusDiv.innerHTML = '<div class="success">✅ 购物车功能正常</div>';
                    resultDiv.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
                } else {
                    statusDiv.innerHTML = `<div class="error">❌ 购物车功能异常: ${data.message}</div>`;
                    resultDiv.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
                }
            } catch (error) {
                statusDiv.innerHTML = `<div class="error">❌ 购物车功能测试失败: ${error.message}</div>`;
                resultDiv.textContent = error.message;
            }
        }
        
        // 页面加载时自动检查后端状态
        window.onload = function() {
            checkBackendStatus();
        };
    </script>
</body>
</html>
